html, body {
    height: 100%; /* 设置html和body的高度为100% */
    margin: 0; /* 移除默认的边距 */
    padding: 0; /* 移除默认的内边距 */
    overflow-x: hidden; /* 防止水平滚动 */
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #08054d, #414345); /* 渐变暗色背景 */
    color: #fff;
    margin: 0;
    padding: 20px;
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素垂直排列 */
}

.container {
    flex: 1; /* 让容器占据剩余空间 */
    background-color: rgba(255, 255, 255, 0.1); /* 半透明的暗色背景 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 容器阴影 */
    border-radius: 15px; /* 容器圆角 */
    padding: 20px;
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    margin-top: 20px; /* 与Tab页的间隔 */
}

/* 导航栏科技风样式 */
.nav-technology {
    border-bottom: none; /* 移除底部边框 */
    gap: 15px; /* 设置标签之间的间隔 */
}

.nav-technology .nav-link {
    border: none; /* 移除边框 */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 容器阴影 */
    background: linear-gradient(45deg, #0e4e71, #414345); /* 添加渐变背景 */
    color: #fff; /* 文字颜色 */
    transition: background 0.3s ease; /* 平滑过渡效果 */
    padding: 10px 20px; /* 添加内边距 */
    font-size: 20px;
    font-weight: bold; /* 设置字体为粗体 */
}

.nav-technology .nav-link:hover,
.nav-technology .nav-link:focus {
    background: linear-gradient(45deg, #08054d, #214697); /* 悬停时保持渐变背景 */
    color: #fff; /* 悬停时文字颜色 */
}

.nav-technology .nav-link.active {
    background: linear-gradient(45deg, #9fb0cf, #555); /* 活动状态的背景 */
}

.nav-technology .nav-item {
    margin-bottom: 0; /* 移除底部边距 */
}

.btn-success, .btn-danger {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px; /* 按钮圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 按钮阴影 */
    transition: all 0.3s ease;
    margin: 0 20px; /* 按钮间隔 */
    font-weight: bold; /* 设置字体为粗体 */
}

.btn-success, .btn-success-min {
    background-color: #1BC964; /* 启动服务按钮颜色 */
    border-color: #1BC964;
    color: #fff; /* 文字颜色 */
}

.btn-danger, .btn-danger-min {
    background-color: #F22760; /* 停止服务按钮颜色 */
    border-color: #F22760;
    color: #fff; /* 文字颜色 */
}

.btn-success-min, .btn-danger-min {
    padding: 5px 15px;
    font-size: 15px;
    border-radius: 10px; /* 按钮圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 按钮阴影 */
    transition: all 0.3s ease;
    margin: 0 5px; /* 按钮间隔 */
}

.btn-success:hover, .btn-danger:hover, .btn-success-min:hover, .btn-danger-min:hover {
    transform: translateY(-2px); /* 按钮悬浮效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.table {
    background-color: rgba(255, 255, 255, 0.2); /* 表格暗色背景 */
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 表格阴影 */
}

th, td {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

th {
    font-size: 20px;
    font-weight: bold; /* 设置字体为粗体 */
}

td {
    font-size: 18px;
}

.row {
    align-items: center; /* 使行内元素垂直居中 */
}

/* 表单背景 */
.form-background {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 浅色边框 */
    padding: 20px;
    border-radius: 8px;
}

/* 表格背景 */
.table-background {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    color: #fff; /* 白色文字 */
}

/* 表格标题行 */
thead {
    background-color: rgba(255, 255, 255, 0.2); /* 稍微深一些的背景 */
}

/* 表格行悬停效果 */
tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.15); /* 悬停时更深的背景 */
}

hr {
    border: 10px;
    height: 2px;
    background-color: #565ad6;
    margin: 20px 0;
}

.config-container {
    font-family: 'Open Sans', sans-serif;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-row {
    margin-bottom: 25px;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.form-control {
    border-radius: 10px; /* 输入框圆角 */
    background-color: rgb(215, 226, 242); /* 输入框背景颜色 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 90%;
    line-height: 2; /* 增加文本的行高 */
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

label {
    font-family: 'Arial', sans-serif; /* 设置字体族 */
    font-size: 18px; /* 设置字体大小 */
    color: #e5d7d7; /* 设置字体颜色 */
    font-weight: bold; /* 设置字体为粗体 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 设置文本阴影 */
    cursor: pointer; /* 当鼠标悬停在标签上时显示指针 */
}